<template>
	<uni-popup scroll-y="true" :overlayStyle="{'touch-action':'none'}" class="popupWidth" ref="popup" type="bottom"
		background-color="#fff">
		<view class="buildings">
			<view class="buildings_title">点击查看各个收货地址图片</view>
			<view class="buildings_list">
				<view v-for="(item,index) in buildingsList" class="buildings_item"
					@click="goBuildingDetails(item.buildingName)" :key="item.buildingName">
					<image :src="item.buildingIconUrls"></image>
					<view>{{item.buildingName}}</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import util from "@/utils/util.js";
	export default {
		name: "buildingList",
		props: {
			// 收货地址列表
			buildingsList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {

			};
		},
		methods:{
			goBuildingDetails(name) {
				
				util.goToUrl(
					`/pages/buildingDetails/buildingDetails?name=${name}`)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.popupWidth {
		// width: 80vw;
		/deep/ .uni-popup {
			.uni-popup__wrapper {
				border-radius: 20px;
			}
		}
	}



	// 大厦列表
	.buildings {
		@include flexs(center, flex-start);
		flex-direction: column;
		padding: 40rpx 25rpx 20rpx;
		background: #fff;

		.more {
			text-align: center;
			width: 92rpx;
			height: 92rpx;
			line-height: 92rpx;
			margin-bottom: 45rpx;
			border: 6rpx solid #000;
			border-radius: 28rpx;
		}

		&_title {
			font-size: 28rpx;
			font-weight: 600;
			margin-bottom: 30rpx;
		}

		&_list {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			// width: 583rpx;
		}

		&_item {
			display: flex;
			flex-direction: column;
			align-items: center;
			// justify-content: space-between;
			text-align: center;
			width: 104rpx;
			margin: 0 42.5rpx 30rpx 0;

			&:nth-child(5n) {
				margin-right: 0;
			}

			// width: 148rpx;

			image {
				display: block;
				width: 104rpx;
				height: 104rpx;
			}

			view {
				width: 100%;
				font-size: 22rpx;
				margin-top: 10rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
</style>